<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>树形结构</title>
	<link rel="stylesheet" type="text/css" href="source/tree/tree.css">
</head>
<body>
	<div id="app">
    	<m-tree :list="list"></m-tree>
	</div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*
		组件的递归调用，注意递归调用的html 结构和数据结构必须完全相同，如果出现不同，将共有部分提取做单独组建
        动态数据一定使用 v-bind 指令，只要是和数据相关，就要使用 v-bind 指令
	*/
	var list = [{
        title: "目录",
        children: [{
            title: "我的音乐",
            children: [{
                title: "周杰伦",
                children: [{
                    title: "发如雪"
                }]
            }, {
                title: "王杰",
                children: [{
                    title: "一场游戏一场梦"
                }]
            }]
        }, {
            title: "我的照片"
        }]
    }];

    // 组件递归调用，东岱改变层级
    Vue.component( 'm-list', {
        
        computed : {
            increase(){
                var c = this.count;
                return ++c;
            },
            padding(){
                return {
                    'padding-left' : this.count * 16 + 'px'
                }
            }
        },
        props : {
            list : {
                type : Array,
                default : []
            },
            count : {
                type : Number,
                default : 0
            }
        },
        template : `
            <ul>
                <li v-for="item of list">
                    <div class="tree-title" :style="[padding]">
                        <span><strong>{{item.title}}</strong> <i class="ico"></i></span>
                    </div>
                    <m-list v-if="item.children" :list="item.children" :count="increase"></m-list>
                </li>
            </ul>
        `
    });

    Vue.component( 'm-tree', {
    	props : {
    		list : {
    			type : Array,
    			default : []
    		}
    	},
    	template : `
			<div class="tree-menu-comm tree-menu">
                <m-list :list="list"></m-list>
			</div>
    	`
    });
	let vm = new Vue({
		el : '#app',
		data : {
			list
		}
	});
</script>